<template>
  <div>
    <el-button type="primary" round size="small" @click="vacAdd"
      >疫苗入库</el-button
    >

    <div :style="{ 'margin-top': '25px' }">
      <el-card>
        <el-table :data="tableList" style="width: 100%">
          <el-table-column prop="orderId" label="订单号" align="center">
          </el-table-column>
          <el-table-column prop="vaccineName" label="疫苗类型" align="center">
          </el-table-column>
          <el-table-column prop="vaccinePrice" label="单价" align="center">
          </el-table-column>
          <el-table-column prop="vaccineNum" label="数量" align="center">
          </el-table-column>
          <el-table-column prop="creatTime" label="购买日期" align="center">
          </el-table-column>
          <el-table-column prop="totalPrice" label="总价" align="center">
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
        :title="title"
        :visible="visible"
        size="small"
        @close="close"
        width="465px"
      >
        <el-form
          :model="form"
          inline
          label-position="right"
          label-width="85px"
          ref="formRef"
          :rules="rules"
        >
          <el-form-item :label="label" required prop="vaccineId">
            <el-select v-model="form.vaccineId" placeholder="请选择">
              <el-option
                v-for="item in vaccTableList"
                :key="item.value"
                :label="item.vaccineName"
                :value="item.vaccineId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单价" required prop="vaccinePrice">
            <el-input
              v-model="form.vaccinePrice"
              style="width:276px"
            ></el-input>
          </el-form-item>
          <el-form-item label="数量" required prop="vaccineNum">
            <el-input v-model="form.vaccineNum" style="width:276px"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      title: "疫苗入库",
      label: "名称",
      visible: false,
      form: {},
      tableData: { pageNum: 1, pageSize: 50 },
      tableList: {},
      vaccTableList: {},
      rules: {
        vaccinePrice: [
          {
            required: true,
            message: "价格不能为空",
            trigger: "blur"
          }
        ],
        vaccineNum: [
          {
            required: true,
            message: "数量不能为空",
            trigger: "blur"
          }
        ],
        vaccinePrice: [
          {
            required: true,
            message: "不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    async getVaccTablelist() {
      const { data: res } = await this.$http.post(
        "/vaccine/getVaccinePage",
        this.tableData
      );
      if (res.code == 200) {
        this.vaccTableList = res.data.data;
        console.log(this.tableList);
      } else {
        this.$message.error(res.msg);
      }
    },
    async getTablelist() {
      const { data: res } = await this.$http.post(
        "vaccineOrder/getAllPage",
        this.tableData
      );
      if (res.code == 200) {
        this.tableList = res.data.data;
        console.log(this.tableList);
      } else {
        this.$message.error(res.msg);
      }
    },
    vacAdd() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.form.data = "";
    },
    confirm() {
      this.$refs.formRef.validate(value => {
        if (!value) return;
        this.$http
          .post("/vaccineOrder/insertVaccineOrder", this.form)
          .then(res => {
            if (res.data.code == 200) {
              this.getTablelist();
              this.visible = false;
              this.$message.success("入库成功");
            } else {
              this.$message.error(res.msg);
            }
          });
      });
    }
  },

  mounted() {
    this.getVaccTablelist();
    this.getTablelist();
  }
};
</script>

<style lang="less" scoped></style>
